<template>
  <view class="video-container">
    <mescroll-body ref="mescrollRef" @init="onInit" @up="upCallback" @down="downCallback">
      <block class="items" v-for="(item, index) in videoList" :key="index">
        <hot-video-item :videoData="item" @click="onClickBottom" ></hot-video-item>
      </block>
    </mescroll-body>
  </view>
</template>

<script>
import {mapMutations} from 'vuex'
import MescrollMixin from '@/uni_modules/mescroll-uni/components/mescroll-uni/mescroll-mixins'
import { getHotVideoAPI } from "../../apis/video";
import hotVideoItem from "../../components/hot-video-item/hot-video-item.vue";
export default {
  components: { hotVideoItem },
  mixins:[MescrollMixin],
  data() {
    return {
      videoList: [],
      page: 1,
      size: 10,
      isInit:true,
      mescroll:null
    };
  },
  created() {
    // this.getHotVideoData();
  },
  mounted(){
    this.mescroll = this.$refs.mescrollRef.mescroll
  },
  methods: {
    ...mapMutations('video',['setVideoData']),
    async getHotVideoData() {
      const { data: res } = await getHotVideoAPI({
        page: this.page,
        size: this.size,
      });
      this.videoList = [...this.videoList,...res.list];
      // console.log(this.videoList);
    },
    async onInit(){
      await this.getHotVideoData()
      this.isInit = false
      this.mescroll.endSuccess()
    },
    async upCallback(){
      if(this.isInit) {return}
      this.page++
      await this.getHotVideoData()
      this.mescroll.endSuccess()
    },
    downCallback(){
      if(this.isInit) {return}
      this.page=1
      this.getHotVideoData()
      this.mescroll.endSuccess()
    },
    onClickBottom(videoData){
      this.setVideoData(videoData)
      uni.navigateTo({url:'/subpkg/pages/video-detail/video-detail'})
    }
  },
};
</script>

<style lang="scss" scoped>
.video-container {
  background-color: #e1e1e1;
}
</style>
